<template>
  <div id="app">
    <Topbar :key="Topbarkey"></Topbar>
    <Header></Header>
    <Login v-if="isshowloginmodal"></Login>
    <router-view @updatekey="getVal" />
    <Footer></Footer>
    <!-- <button @click="fn">点击请求</button> -->
    <transition name="sb">
      <Tost v-show="isShowToast"></Tost>
    </transition>
  </div>
</template>

<script>
import Footer from "./components/Footer.vue";
import Header from "./components/Header.vue";
import Topbar from "./components/Topbar.vue";
import Login from "@/components/Login.vue";
import Tost from "@/components/Tost.vue";

import { JingPingAPI } from "./request/API";
import { mapState } from "vuex";
export default {
  components: {
    Footer,
    Header,
    Topbar,
    Login,
    Tost,
  },
  data() {
    return {
      Topbarkey: 0,
    };
  },
  methods: {
    async fn() {
      let res1 = await JingPingAPI();
      // console.log("app-res1", res1);
      let res2 = await JingPingAPI();
      // console.log("app-res2", res2);
    },
    getVal() {
      console.log("子传父，让topbar组件重载");
      this.Topbarkey++;
    },
  },
  computed: {
    ...mapState({
      isshowloginmodal: (state) => state.showmodal.isshowloginmodal,
      isShowToast: (state) => state.showtoast.isShowToast,
    }),
  },
  watch: {
    "$route.path": {
      handler() {
        //如何让组件重新加载（重新执行创建挂载的钩子），解决：修改它的key值
        this.Topbarkey++; //修改了Topbar组件的key 从而让组件重新加载
      },
    },
  },
};
</script>
<style lang="less">
</style>
